<script setup lang="ts"></script>

<template>
  <div class="wrap">
    <h1 class="title">全球业绩页 Home Box</h1>
    <div class="box home-box">
      <div class="left-box box-warp">
        <GroupBox
          pName="l-box"
          :title="'GroupBox Home Left Box'"
          transition="left"
        >
          <template #title> 模块标题 </template>
          <template #first>
            <card-box :moreBtn="{ show: true, position: 'right' }">
              <template v-slot:title>
                <h1>Home Box</h1>
              </template>
              <div class="box-body">Home Box Body</div>
              <template v-slot:child>
                <div style="height: 2000px">123123131231231232</div>
              </template>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>

      <div class="right-box box-warp">
        <GroupBox
          pName="r-box"
          :title="'GroupBox Right Box'"
          transition="right"
        >
          <template #title> 模块标题 </template>
          <template #first>
            <card-box
              :moreBtn="{
                show: true,
                position: 'left',
                transition: 'left',
                pName: 'l-box',
              }"
            >
              <template v-slot:title>
                <h1>Home Box</h1>
              </template>
              <div class="box-body">Home Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>
    </div>

    <h1 class="title">经销商看板页 Dealer Box</h1>
    <div class="box dealer-box">
      <div class="left-box box-warp">
        <GroupBox pName="l-box" :title="'测试标题'" transition="left">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box :moreBtn="{ show: true, position: 'right' }">
              <template v-slot:title>
                <h1>经销商看板 Dealer Box</h1>
              </template>
              <div class="box-body">Dealer Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>

      <div class="right-box box-warp">
        <GroupBox pName="r-box" :title="'测试标题'" transition="right">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box
              :moreBtn="{
                show: true,
                position: 'right',
                transition: 'right',
                pName: 'r-box',
              }"
            >
              <template v-slot:title>
                <h1>经销商看板 Dealer Box</h1>
              </template>
              <div class="box-body">Dealer Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>
    </div>

    <h1 class="title">全球供应链看板页 Supply Box</h1>
    <div class="box supply-box">
      <div class="left-box box-warp">
        <GroupBox pName="l-box" :title="'测试标题'" transition="left">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box :moreBtn="{ show: true, position: 'right' }">
              <template v-slot:title>
                <h1>全球供应链看板页 supply Box</h1>
              </template>
              <div class="box-body">supply Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>

      <div class="right-box box-warp">
        <GroupBox pName="r-box" :title="'测试标题'" transition="right">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box
              :moreBtn="{
                show: true,
                position: 'right',
                transition: 'right',
                pName: 'r-box',
              }"
            >
              <template v-slot:title>
                <h1>全球供应链看板页 supply Box</h1>
              </template>
              <div class="box-body">supply Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>
    </div>

    <h1 class="title">全球财务看板页 Finance Box</h1>
    <div class="box finance-box">
      <div class="left-box box-warp">
        <GroupBox pName="l-box" :title="'测试标题'" transition="left">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box :moreBtn="{ show: true, position: 'right' }">
              <template v-slot:title>
                <h1>全球财务看板页 finance Box</h1>
              </template>
              <div class="box-body">finance Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>

      <div class="right-box box-warp">
        <GroupBox pName="r-box" :title="'测试标题'" transition="right">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box
              :titleInfo="{ title: '这是一个 Props {5sj} 标题' }"
              :moreBtn="{
                show: true,
                position: 'right',
                transition: 'right',
                pName: 'r-box',
              }"
            >
              <template v-slot:title>
                <h1>全球财(5月)务看板页 finance Box</h1>
              </template>
              <div class="box-body">finance Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>
    </div>

    <h1 class="title">全球人力看板页 Human Box</h1>
    <div class="box human-box">
      <div class="left-box box-warp">
        <GroupBox pName="l-box" :title="'测试标题'" transition="left">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box :moreBtn="{ show: true, position: 'right' }">
              <template v-slot:title>
                <h1>全球财务看板页 Human Box</h1>
              </template>
              <div class="box-body">Human Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>

      <div class="right-box box-warp">
        <GroupBox pName="r-box" :title="'测试标题'" transition="right">
          <template #title> 模块标题 </template>
          <template #first>
            <card-box
              :titleInfo="{ title: '这是一个 Props {5sj} 标题' }"
              :moreBtn="{
                show: true,
                position: 'right',
                transition: 'right',
                pName: 'r-box',
              }"
            >
              <template v-slot:title>
                <h1>全球财(5月)务看板页 Human Box</h1>
              </template>
              <div class="box-body">Human Box Body</div>
            </card-box>
          </template>
          <template #second>
            <div>组模块图表集合区</div>
          </template>
        </GroupBox>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  background-color: #0f2139;
  height: calc((345px + 160px) * 5);
}
.title {
  text-align: center;
  padding: 30px 0;
  color: #fff;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
}
.box {
  display: flex;
  justify-content: space-around;
  .box-warp {
    width: 45%;
  }
}
.box-body {
  height: 300px;
  // background-color: #fff;
}
</style>
